<!DOCTYPE html>
<html lang="en">
<!-- head start -->

<head>

    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="description" content="写博客">
    <meta name="keywords" content="写博客">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>写博客</title>
    <link rel="shortcut icon" type="image/x-icon" href="http://hoppinzq.com/static/images/favicon.ico">
    <link rel="stylesheet" href="http://hoppinzq.com/static/css/vendor/ionicons.css"/>
    <link rel="stylesheet" href="../static/css/font-awesome/css/font-awesome.css">
    <link rel="stylesheet" href="http://hoppinzq.com/static/css/vendor/line-awesome.min.css"/>

    <link rel="stylesheet" href="http://hoppinzq.com/static/css/plugins/animate.min.css"/>
    <link rel="stylesheet" href="http://hoppinzq.com/static/css/plugins/swiper-bundle.min.css"/>
    <link rel="stylesheet" href="http://hoppinzq.com/static/css/plugins/jquery-ui.min.css"/>
    <link rel="stylesheet" href="http://hoppinzq.com/static/css/plugins/fileinput.css"/>
    <link rel="stylesheet" href="http://hoppinzq.com/static/css/plugins/highlight.css"/>
    <link rel="stylesheet" href="http://hoppinzq.com/static/css/plugins/editormd.min.css"/>

    <link rel="stylesheet" href="http://hoppinzq.com/static/css/plugins/medium-editor.css">
    <link rel="stylesheet" href="http://hoppinzq.com/static/css/themes/default.css">
    <link rel="stylesheet" href="http://hoppinzq.com/static/css/plugins/medium-editor-insert-plugin.css">
    <link rel="stylesheet" href="http://hoppinzq.com/static/css/plugins/blogtag.css">
    <link rel="stylesheet" href="http://hoppinzq.com/static/css/plugins/sitelogo.css">
    <link rel="stylesheet" href="http://hoppinzq.com/static/css/plugins/cropper.min.css">
    <link rel="stylesheet" href="http://hoppinzq.com/static/css/plugins/jBox.all.css">
    <link id="theme-style" rel="stylesheet" type="text/css" href="http://hoppinzq.com/static/css/themes/white.css">
    <link rel="stylesheet" href="http://hoppinzq.com/static/css/style.css"/>
    <link rel="stylesheet" href="http://hoppinzq.com/static/css/style1.css"/>
</head>

<body>
<div class="preloader center">
    <span>H</span><span>O</span><span>P</span><span>P</span><span>I</span><span>N</span><span>Z</span><span>Q</span>
</div>

<div class="modal fade offcanvas-modal" id="exampleModal">
    <div class="modal-dialog offcanvas-dialog">
        <div class="modal-content">
            <div class="modal-header offcanvas-header">
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>

            <ul class="header-topbar-nav nav my-4 justify-content-center">
                <li class="topbar-nav-item">
                    <a class="topbar-nav-link" href="javaScript:void(0)"><i class="icon las la-map-marker"></i>关于我</a>
                </li>
                <li class="topbar-nav-item">
                    <a class="topbar-nav-link" href="javaScript:void(0)"><i class="icon las la-shipping-fast"></i>浏览记录</a>
                </li>
            </ul>

            <div class="bg-white">
                <ul class="user-mobile-bar quick-links justify-content-center"></ul>
            </div>

            <div class="offcanvas-form">
                <input type="text" class="form-control" placeholder="输入搜索内容 ... "/>
                <button class="btn-search btn-success" type="submit">
                    <i class="las la-search"></i>
                </button>
            </div>

            <nav id="offcanvasNav" class="offcanvas-menu">
                <ul class="blog-list-show-bar-mobile"></ul>
                <div class="offcanvas-social"><ul></ul></div>
            </nav>
            <div class="header-top">
                <ul id="offcanvas-menu2" class="blog-ctry-menu blog-ctry-menu2">
                    <li>
                        <a href="javascript:void(0)" class="setup-show-theme"><i class="icon las la-sun"></i>日间模式</a>
                        <ul class="category-sub-menu">
                            <li><a href="javaScript:void(0)" class="setup-sun setup-theme" data-theme="white"><i
                                    class="icon las la-sun"></i>日间模式</a></li>
                            <li><a href="javaScript:void(0)" class="setup-moon setup-theme" data-theme="dark"><i
                                    class="icon las la-moon"></i>夜间模式</a></li>
                        </ul>
                    </li>
                    <li>
                        <a href="javascript:void(0)">简体中文</a>
                        <ul class="category-sub-menu">
                            <li>
                                <a href="javaScript:void(0)">简体中文</a>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <a href="javascript:void(0)">设置</a>
                        <ul class="category-sub-menu">
                            li><a href="javaScript:void(0)" class="clear-cache">清除缓存</a></li>
                            <li><a href="javaScript:void(0)" class="not-allow-cookie">不允许(我)使用cookie</a></li>
                            <li><a class="openDebugger">(移动端)开启调试模式</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>

<header>
    <div class="header-top-bar d-none d-md-block">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-3">
                    <div class="social-links social-links-dark"></div>
                </div>
                <div class="col-9">
                    <ul class="header-topbar-nav nav">
                        <li class="topbar-nav-item">
                            <a class="topbar-nav-link cursor-help" href="javaScript:void(0)" title="点击围观"><i
                                    class="icon las la-user"></i>关于我</a>
                        </li>
                        <li class="topbar-nav-item">
                            <a class="topbar-nav-link cursor-help" href="javaScript:void(0)"><i class="icon las la-history"></i>浏览记录</a>
                        </li>
                        <li class="topbar-nav-item dropdown">
                            <a class="topbar-nav-link setup-show-theme-pc" href="javaScript:void(0)" data-bs-toggle="dropdown" id="euro"><i
                                    class="icon las la-sun"></i><span>日间模式</span> <i class="ion-chevron-down"></i></a>
                            <ul class="dropdown-menu" aria-labelledby="euro">
                                <li><a class="dropdown-item setup-sun setup-theme" data-theme="white" href="javaScript:void(0)"><i
                                        class="icon las la-sun"></i>日间模式</a></li>
                                <li><a class="dropdown-item setup-moon setup-theme" data-theme="dark" href="javaScript:void(0)"><i
                                        class="icon las la-moon"></i>夜间模式</a></li>
                            </ul>
                        </li>
                        <li class="topbar-nav-item dropdown">
                            <a class="topbar-nav-link" href="javaScript:void(0)" data-bs-toggle="dropdown" id="simple_chinese">
                                <span>简体中文</span> <i class="ion-chevron-down"></i></a>

                            <ul class="dropdown-menu" aria-labelledby="simple_chinese">
                                <li><a class="dropdown-item" href="javaScript:void(0)">简体中文</a></li>
                            </ul>
                        </li>
                        <li class="topbar-nav-item dropdown">
                            <a class="topbar-nav-link" href="javaScript:void(0)" data-bs-toggle="dropdown" id="blog_set">
                                <i class="icon las la-whmcs"></i><span>设置</span> <i class="ion-chevron-down"></i></a>
                            <ul class="dropdown-menu" aria-labelledby="simple_chinese">
                                <li><a class="dropdown-item cursor-help clear-cache" title="这会导致一些资源重新加载">清除缓存</a></li>
                                <li><a class="dropdown-item cursor-help not-allow-cookie"
                                       title="这会导致您无法收到更精准的推荐">不允许(我)使用cookie</a></li>
                                <li><a class="dropdown-item cursor-help openDebugger"
                                       title="将会开启一个悬浮图标，以在移动端调试">(移动端)开启调试模式</a></li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <div id="active-sticky2" class="header-space bg-white">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-6 col-sm-4 col-lg-7 col-xl-8">
                    <div class="d-flex">
                        <div class="flex-shrink-0">
                            <a class="logo"><img class="hoppinzq-logo" src="http://hoppinzq.com/static/images/logo/1640338711_113639.png" alt="image_not_found"></a>
                        </div>
                        <div class="flex-grow-1 d-none d-lg-block">
                            <div class="search-form position-relative searchbox">
                                <div class="input-group">
                                    <input autocomplete="off" id="main_search" class="form-control" type="text" placeholder="搜索博客 ... "/>
                                    <div class="input-group-text search-blog">
                                        <button class="search-btn btn-success">
                                            <i class="ion-ios-search-strong"></i>
                                        </button>
                                    </div>
                                </div>
                                <ul id="hotwords" class="hotwords display-none">
                                    <li class="hwtitle hottop10">
                                        热搜TOP10：
                                    </li>
                                    <li class="hwtitle history-search">
                                        <span class="float-start">搜索历史</span>
                                        <span class="cursor-pointer clear-history float-end">清除历史记录</span>
                                    </li>
                                    <div>
                                        <ul id="history-search"> </ul>
                                    </div>
                                </ul>
                                <select class="form-select d-none d-xl-block" id="autoSizingSelect"> </select>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-6 col-sm-8 col-lg-5 col-xl-4">
                    <ul class="quick-links user-bar"></ul>
                </div>
            </div>
        </div>
    </div>
    <div id="active-sticky" class="header-botom header-botom-three bg-white d-none d-lg-block">
        <div class="container position-relative">
            <div class="row align-items-center">
                <div class="col-12 d-flex align-items-center">
                    <div class="d-flex align-items-center flex-wrap vertical-menu">
                        <button class="menu-bars menu-btn d-none d-lg-flex">
                            <i class="las la-bars"></i> 所有分类
                        </button>
                        <ul class="vmenu-content blog-class-ul"> </ul>
                    </div>
                    <ul class="main-menu blog-list-show-bar"></ul>
                </div>
            </div>
        </div>
    </div>
</header>

<nav class="breadcrumb-section">
    <div class="container">
        <div class="row">
            <div class="col-12">
                <ol class="breadcrumb bg-transparent m-0 p-0 align-items-center">
                    <li class="breadcrumb-item"><a class="main-page">首页</a></li>
                    <li class="breadcrumb-item active" aria-current="page">写博客</li>
                </ol>
            </div>
        </div>
    </div>
</nav>

<div class="my-account section-mb">
    <div class="container">
        <div class="row">
            <div class="col-12">
                <h3 class="title text-capitalize mb-5 pb-4" onclick="_zqLog(zq)">博客构建</h3>
            </div>
            <div class="col-lg-1 col-12 mb-5">
                <div class="myaccount-tab-menu nav blog-step-title" role="tablist">
                    <a href="#stpe111" data-bs-toggle="tab" class="active step1">第一步</a>
                    <a href="#step222" data-bs-toggle="tab" class="step2">第二步</a>
                    <a href="#step333" data-bs-toggle="tab" class="step3">第三步</a>
                </div>
            </div>
            <div class="col-lg-11 col-12 mb-5">
                <div class="tab-content" id="myaccountContent">
                    <div class="tab-pane fade show active step1" id="stpe111" role="tabpanel">
                        <div class="myaccount-content">
                            <h3>快速构建你的博客(移动端仅建议浏览)</h3>
                            <div class="welcome mb-20">
                                <p class="welcome-user">
                                    欢迎写下你的博客, <strong class="welcome-user-name"></strong> (不是
                                    <strong>本人 !</strong><a href="javaScript:void(0)" class="logout"> 登出
                                </a>)
                                </p>
                            </div>

                            <p class="mb-0">
                                你将在引导下，完成并发布你的博客，你可以通过富文本编辑器（推荐），markdown编辑器（进阶）来
                                写博客。你也可以通过内置的爬虫，将csdn上的文章导出markdown格式或者pdf格式以便修改或预览。
                            </p>
                            <div class="blog_select_build_type">
                                <ul class="mobile-flex">
                                    <li class="input-container">
                                        <span class="control-label">请选择构建方式？</span>
                                    </li>
                                    <li class="input-container">
                                        <div class="radio">
                                            <input id="fwb_simple_radio" class="blog_type_radio blog_type_code_radio" data-type="fwb_simple" data-code="0"
                                                   name="blog_build_type" type="radio">
                                            <label for="fwb_simple_radio" class="radio-label input-container-simplefwb">极简富文本(新手)</label>
                                        </div>
                                    </li>
                                    <li class="input-container">
                                        <div class="radio">
                                            <input id="fwb_radio" class="blog_type_radio blog_type_code_radio" data-type="fwb" checked data-code="1"
                                                   name="blog_build_type" type="radio">
                                            <label for="fwb_radio" class="radio-label input-container-fwb">富文本(推荐)</label>
                                        </div>
                                    </li>
                                    <li class="input-container">
                                        <div class="radio">
                                            <input id="markdown_radio" class="blog_type_radio blog_type_code_radio" data-type="markdown" data-code="2"
                                                   name="blog_build_type" type="radio">
                                            <label for="markdown_radio" class="radio-label input-container-markdown">markdown(专业)</label>
                                        </div>
                                    </li>
                                    <li class="input-container csdn_blog_b">
                                        <div class="radio">
                                            <input id="csdn_radio" class="blog_type_radio blog_type_code_radio" data-type="csdn" data-code="3"
                                                   name="blog_build_type" type="radio">
                                            <label for="csdn_radio" class="radio-label input-container-csdn">爬虫(懒人)</label>
                                        </div>
                                    </li>
                                </ul>
                                <div class="account-details-form row csdn_blog_link_div csdn_blog_b">
                                    <div class="col-lg-12 col-12 mb-5" style="display: flex;">
                                        <div class="col-lg-3 col-md-3 col-sm-12">
                                            <div class="location-dropdown">
                                                <i class="icofont-location-arrow"></i>
                                                <select name="pctype" class="blog-form-select custom-select form-control border-0 shadow-sm form-control-lg">
                                                    <option value="1">CSDN</option>
                                                    <option value="2">博客园</option>
                                                    <option value="3">微信公众号</option>
                                                </select>
                                            </div>
                                        </div>
                                        <div class="col-lg-8 col-md-8 col-sm-12">
                                            <input id="csdn_blog_link" class="form-control border-0 form-control-lg shadow-sm" name="csdn_blog_link" placeholder="请输入csdn路径"
                                               type="text">
                                        </div>
                                    </div>
                                </div>
                                <div class="col-12">
                                    <a class="btn btn-dark step1-2-2">
                                        下一步
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="tab-pane fade step2" id="step222" role="tabpanel">
                        <div class="myaccount-content">
                            <h3>编写博客</h3>
                            <div class="saved-message flex flex-row-reverse">

                                <span class="blog-save-lastdate" id="blog_update_time">xxxx-xx-xx xx:xx:xx</span>
                                <span class="blog-save-lastdate cursor-help" title="每隔30s保存一次草稿"><i class="re-save-blog fa fa-refresh"></i>上次更新时间:</span>
                                <span id="markdown_help" class="markdown_top blog-save-lastdate">不会使用？</span>
                                <span id="markdown_width" class="markdown_top blog-save-lastdate">宽屏模式</span>
                                <span id="markdown_import" class="markdown_top blog-save-lastdate">导入md文件</span>
                                <span id="markdown_watch" class="markdown_top blog-save-lastdate" data-text="关闭实时预览">关闭实时预览</span>

                                <input id="markdown_file" name="markdown_file" hidden type="file">
                                <!--                                <p class="saved-message">-->
                                <!--                                    https://www.kancloud.cn/wangfupeng/wangeditor2/113974-->
                                <!--                                </p>-->
                            </div>

                            <div id="container">
                                <div class="editable">
                                    <p class="simple_fwb_default">在这里写内容，选中文字选择样式和<a href="javaScript:void(0)">链接</a>。添加图片请在空白行点击+号添加。|</p>
                                    <br>
                                </div>
                            </div>
                            <div class="editable_fwb"></div>
                            <div id="editable_markdown">
                                <textarea id="editable_markdown_textarea" style="display:none;"></textarea>
                            </div>
                            <div class="col-12 can-up-down" style="margin-top: 1px;height: 10px;display: flex;justify-content: center;">
                                可以上下伸缩
                            </div>
                            <div class="col-12" style="margin-top: 10px">
                                <a class="btn btn-dark step2-2-3">下一步</a>
                                <a class="btn btn-dark step2-save-cg">手动保存为草稿</a>
                            </div>
                        </div>
                    </div>
                    <div class="tab-pane fade step3" id="step333" role="tabpanel">
                        <div class="myaccount-content">
                            <h3>其他设置</h3>
                            <div class="account-details-form">
                                <div class="row">
                                    <div class="col-lg-6 col-12 mb-5">
                                        <input id="blog_title" placeholder="博客标题" type="text" value="">
                                    </div>
                                    <div class="col-12 mb-5">
                                        <input id="blog_description" placeholder="描述一下吧" type="text">
                                    </div>
                                    <div class="col-12 mb-5">
                                        <label class="col-sm-2 control-label">封面(最多一张，可不传)</label>
                                        <div class="col-sm-10">
                                            <button type="button" class="btn btn-success blog_head_image_set"
                                                    data-bs-toggle="modal" data-bs-target="#avatar-modal">
                                                设置封面
                                            </button>
                                            <div class="deal-carousel-item swiper-slide blog_head_image display-none">
                                                <div class="deal-product-card">
                                                    <div class="deal-product-thumb">
                                                        <a class="blog_head_image_part"></a>
                                                        <ul class="actions">
                                                            <li class="action compare">
                                                                <button><i class="las la-sync reload_blog_head_image"
                                                                           data-bs-toggle="modal"
                                                                           data-bs-target="#avatar-modal"
                                                                           title="重新选择"></i></button>
                                                            </li>
                                                        </ul>
                                                    </div>
                                                    <div class="deal-product-content">
                                                        <div class="deal-product-price">

                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-12 mb-5 mobile-flex">
                                        <div class="col-lg-6 col-sm-8 col-xs-10">
                                            <label class="col-6 control-label">选择大类(只能选择单个)&nbsp;&nbsp;&nbsp;&nbsp;
                                                <a class="without-blog-class-big">没有想要的类别？</a></label>
                                            <div class="col-10">
                                                <div id="blog_class_select_big" class="mySelect">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-lg-6 col-sm-8 col-xs-10 blog-small-class-label">
                                            <label class="col-6 control-label">选择小类(可选择多个)&nbsp;&nbsp;&nbsp;&nbsp;<a
                                                    href="javaScript:void(0)" class="without-blog-class-small" data-bs-toggle="modal"
                                                    data-bs-target="#addto-cart-modal">没有想要的类别？</a></label>
                                            <div class="col-12">
                                                <div id="blog_class_select_small" class="mySelect ">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-12 mb-5 flex">
                                        <div class="col-sm-2 ">分类:</div>
                                        <div class="col-sm-4 flex">
                                            <div class="radio" style="margin-right: 10px">
                                                <input id="blog_yc" class="blog_type_radio" checked data-type="fwb"
                                                       name="blog_yczz" type="radio">
                                                <label for="blog_yc" class="radio-label">原创</label>
                                            </div>
                                            <div class="radio">
                                                <input id="blog_zz" class="blog_type_radio" data-type="fwb"
                                                       name="blog_yczz" type="radio">
                                                <label for="blog_zz" class="radio-label">转载</label>
                                            </div>
                                        </div>
                                        <div class="col-sm-6 display-none blog_copy_link_div ">
                                            <input id="blog_copy_link" class="blog-col-10" placeholder="转载路径"
                                                   type="text" value="">
                                        </div>
                                    </div>
                                    <div class="col-12 mb-5 flex">
                                        <div class="col-sm-2 ">允许评论:</div>
                                        <div class="col-sm-10 flex">
                                            <div class="radio" style="margin-right: 10px">
                                                <input id="blog_comment_yes" class="blog_type_radio" checked
                                                       data-type="fwb"
                                                       name="blog_iscomment" type="radio">
                                                <label for="blog_comment_yes" class="radio-label">允许</label>
                                            </div>
                                            <div class="radio">
                                                <input id="blog_comment_no" class="blog_type_radio"
                                                       name="blog_iscomment" type="radio">
                                                <label for="blog_comment_no" class="radio-label">不允许</label>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-12 mb-5 flex align-items-center">
                                        <div class="col-sm-2 ">给自己博客打分:</div>
                                        <div class="col-sm-10 ">
                                            <div class="five-star-level">
                                                <div class="five-star-level-choose" id="J_LevelChoose">
                                                    <div class="five-star-level-selected">
                                                        <div class="level1 star-blog" id="level1"></div>
                                                        <div class="level2 star-blog" id="level2"></div>
                                                        <div class="level3 star-blog" id="level3"></div>
                                                        <div class="level4 star-blog" id="level4"></div>
                                                        <div class="level5 star-blog" id="level5"></div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-12 mb-5 flex">
                                        <label for="blog_fj"
                                               class="col-2 col-sm-2 control-label">附件上传(最大100M)</label>
                                        <div class="col-10 col-sm-10">
                                            <input id="blog_fj" type="file" name="file"
                                                   multiple=true>
                                        </div>
                                    </div>
                                    <div class="col-12">
                                        <a class="btn btn-success insertBlog">确定发布博客</a>
                                        <a class="btn btn-dark step3-2-2">上一步</a>
                                        <a class="btn btn-dark preview-show-blog">预览</a>
                                        <a class="btn btn-dark back-home display-none" >回到首页</a>
                                        <a class="btn btn-dark forward-blog display-none">跳转至新增的博客</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


<section class="service-section section-mt section-mb">
    <div class="container">
        <div class="services">
            <div class="row mb-n7">
                <div class="col-sm-6 col-lg-3 mb-7">
                    <div class="service-item">
                        <img height="40" class="service-icon" src="http://hoppinzq.com/static/images/icon/ebb6f2315e24aa3318a54d151dfdc15.png" alt="images_not_found">
                        <h3 class="service-title">简单富文本组件</h3>
                        <a class="editor_js" target="_blank" href="https://yabwe.github.io/medium-editor/">一款开源且轻量级的行内工具栏编辑器MediumEditor</a>
                    </div>
                </div>
                <div class="col-sm-6 col-lg-3 mb-7">
                    <div class="service-item">
                        <img height="40" class="service-icon" src="http://hoppinzq.com/static/images/icon/f6568bce21b2bbfff7221dae1c49624.png" alt="images_not_found">
                        <h3 class="service-title">富文本</h3>
                        <a class="editor_js" target="_blank" href="https://www.wangeditor.com/doc/">国产的富文本组件wangEditor.js,Typescript 开发的 Web 富文本编辑器， 轻量、简洁、易用、开源免费
                        </a>
                    </div>
                </div>
                <div class="col-sm-6 col-lg-3 mb-7">
                    <div class="service-item">
                        <img height="40" class="service-icon" src="http://hoppinzq.com/static/images/icon/c585d9f08c16498a046ca1683e1116a.png" alt="images_not_found">
                        <h3 class="service-title">markdown组件</h3>
                        <a class="editor_js" target="_blank" href="https://pandao.github.io/editor.md/">开源在线Markdown编辑器</a>
                    </div>
                </div>
                <div class="col-sm-6 col-lg-3 mb-7">
                    <div class="service-item">
                        <img height="40" class="service-icon" src="http://webmagic.io/images/logo.jpeg" alt="images_not_found">
                        <h3 class="service-title">csdn爬虫</h3>
                        <a class="editor_js" target="_blank" href="http://webmagic.io/">WebMagic是一个简单灵活的Java爬虫框架。基于WebMagic，你可以快速开发出一个高效、易维护的爬虫。</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<footer class="footer">
    <div class="copy-right bg-dark">
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <p>Copyright &copy; HOPPINZQ. ICP主体备案号:鲁ICP备2021023310 </p>
                </div>
            </div>
        </div>
    </div>
</footer>

<div class="modal fade" id="addto-cart-modal">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header bg-success border-bottom-0 justify-content-center">
                <h4 class="modal-title text-center">设置类别</h4>
                <button type="button" class="btn-close position-absolute" data-bs-dismiss="modal" aria-label="Close">×
                </button>
            </div>
            <div class="modal-body p-5">
                <div class="row align-items-center align-items-lg-start">
                    <div class="col-lg-5">
                        <div class="row align-items-center align-items-lg-start">
                            <div class="col-md-12">
                                <h6 class="product-name">系统默认标签</h6>
                                <input type="text" id="blog_tag_default" class="default-tag">
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-7">
                        <div class="cart-content">
                            <h6 class="product-name">添加的标签</h6>
                            <input type="text" id="blog_tag_active" class="active-tag">
                        </div>
                    </div>
                    <div class="col-lg-12" style="display: flex;align-items: center;flex-direction: column;">
                        <button class="btn btn-sm btn-dark mt-3 mt-sm-0 save-blog-class">保存</button>
                        <button class="display-none" data-bs-dismiss="modal" id="closeBlogClassModal"></button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!--图片裁剪-->
<div class="modal fade" id="avatar-modal">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header bg-success border-bottom-0 justify-content-center">
                <h4 class="modal-title text-center">上传图片</h4>
                <button type="button" class="btn-close position-absolute" data-bs-dismiss="modal" aria-label="Close">×
                </button>
            </div>
            <div class="modal-body">
                <form class="avatar-form">
                    <div class="avatar-body">
                        <div class="avatar-upload">
                            <input class="avatar-src" name="avatar_src" type="hidden">
                            <input class="avatar-data" name="avatar_data" type="hidden">
                            <label for="avatarInput">图片上传</label>
                            <button class="btn btn-success" type="button"
                                    onClick="$('input[id=avatarInput]').click();">请选择图片
                            </button>
                            <span id="avatar-name"></span>
                            <input class="avatar-input hide" id="avatarInput" name="file" type="file"></div>
                        <div class="row">
                            <div class="col-md-9">
                                <div class="avatar-wrapper"></div>
                            </div>
                            <div class="col-md-3">
                                <div class="avatar-preview preview-lg" id="imageHead"></div>
                            </div>
                        </div>
                        <div class="row avatar-btns">
                            <div class="col-md-4">
                                <div class="btn-group">
                                    <button class="btn btn-success fa fa-undo" data-method="rotate" data-option="-90"
                                            type="button" title="Rotate -90 degrees"> 向左旋转
                                    </button>
                                </div>
                                <div class="btn-group">
                                    <button class="btn btn-success fa fa-repeat" data-method="rotate" data-option="90"
                                            type="button" title="Rotate 90 degrees"> 向右旋转
                                    </button>
                                </div>
                            </div>
                            <div class="col-md-5" style="text-align: right;">
                                <button class="btn btn-success fa fa-arrows" data-method="setDragMode"
                                        data-option="move"
                                        type="button" title="移动">
								<span class="docs-tooltip" data-toggle="tooltip" title=""
                                      data-original-title="$().cropper(&quot;setDragMode&quot;, &quot;move&quot;)">
								</span>
                                </button>
                                <button type="button" class="btn btn-success fa fa-search-plus" data-method="zoom"
                                        data-option="0.1" title="放大图片">
								<span class="docs-tooltip" data-toggle="tooltip" title=""
                                      data-original-title="$().cropper(&quot;zoom&quot;, 0.1)">
								</span>
                                </button>
                                <button type="button" class="btn btn-success fa fa-search-minus" data-method="zoom"
                                        data-option="-0.1" title="缩小图片">
								<span class="docs-tooltip" data-toggle="tooltip" title=""
                                      data-original-title="$().cropper(&quot;zoom&quot;, -0.1)">
								</span>
                                </button>
                                <button type="button" class="btn btn-success fa fa-refresh" data-method="reset"
                                        title="重置图片">
									<span class="docs-tooltip" data-toggle="tooltip" title=""
                                          data-original-title="-$().cropper(&quot;reset&quot;)"
                                          aria-describedby="tooltip866214"></span>
                                </button>
                            </div>
                            <div class="col-md-3">
                                <button class="btn btn-success btn-block avatar-save fa fa-save" type="button"
                                        data-bs-dismiss="modal"> 保存修改
                                </button>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<script src="http://hoppinzq.com/static/js/vendor/jquery.min.js"></script>
<script src="http://hoppinzq.com/static/js/plugins/jquery-ui.min.js"></script>
<script src="http://hoppinzq.com/static/js/vendor/bootstrap.min.js"></script>
<script src="http://hoppinzq.com/static/js/vendor/bootstrap.bundle.min.js"></script>
<script src="http://hoppinzq.com/static/js/vendor/modernizr-3.11.2.min.js"></script>
<script src="http://hoppinzq.com/static/js/plugins/ajax-contact.js"></script>
<script src="http://hoppinzq.com/static/js/plugins/ajax-mailchimp.js"></script>
<script src="http://hoppinzq.com/static/js/plugins/form-validation.js"></script>
<script src="http://hoppinzq.com/static/js/plugins/swiper-bundle.min.js"></script>
<script src="http://hoppinzq.com/static/js/plugins/scroll-up.js"></script>
<script src="http://hoppinzq.com/static/js/plugins/fileinput.js"></script>
<script src="http://hoppinzq.com/static/js/plugins/cropper.js"></script>
<script src="http://hoppinzq.com/static/js/plugins/sitelogo.js"></script>
<script src="http://hoppinzq.com/static/js/plugins/html2canvas.min.js"></script>

<script src="http://hoppinzq.com/static/js/plugins/buttonLoading.js"></script>
<script src="http://hoppinzq.com/static/js/plugins/zDialog.js"></script>
<script src="http://hoppinzq.com/static/js/plugins/selectBlogClass.js"></script>
<script src="http://hoppinzq.com/static/js/plugins/blogClasstag.js"></script>
<script src="http://hoppinzq.com/static/js/plugins/zjax.js"></script>

<script src="http://hoppinzq.com/static/js/plugins/wangEditor.js"></script>
<script src="http://hoppinzq.com/static/js/plugins/highlight.min.js"></script>
<script src="http://hoppinzq.com/static/js/plugins/editormd.min.js"></script>

<script src="http://hoppinzq.com/static/js/plugins/medium-editor.min.js"></script>
<script src="http://hoppinzq.com/static/js/plugins/handlebars.runtime.min.js"></script>
<script src="http://hoppinzq.com/static/js/plugins/jquery-sortable-min.js"></script>
<script src="http://hoppinzq.com/static/js/plugins/jquery.iframe-transport.min.js"></script>
<script src="http://hoppinzq.com/static/js/plugins/jquery.fileupload.min.js"></script>
<script src="http://hoppinzq.com/static/js/plugins/edium-editor-insert-plugin.js"></script>
<script src="http://hoppinzq.com/static/js/plugins/eruda.js"></script>
<script src="http://hoppinzq.com/static/js/plugins/jBox.all.js"></script>

<script src="../static/js/main.js"></script>
<script src="../static/js/script/writeblog/script.js"></script>
</body>

</html>